<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Scenarios Detail</title>
</head>
<body>
	<script type="text/javascript">

		window.onload = function addCells() {
			//请求参数
			var list = {
				"scenariosID": localStorage.getItem("scenariosID")
			};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/scenariosElement",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
                        elementId = result[i].id;
                        systemName = result[i].system_name;
						modelName = result[i].model_name;
						pageName = result[i].page_name;
						elementName = result[i].element_name;
						operateElement = result[i].operator;
						operateParams = result[i].params;
						scenariosName = result[i].scenarios_name;

						sortId = result[i].sort_id;

						var table = document.getElementById("dataTable");
						var row = table.insertRow(1);
                        var idCell = row.insertCell(0);
                        var systemNameCell = row.insertCell(1);
                        var modelNameCell = row.insertCell(2);
                        var pageNameCell = row.insertCell(3);
                        var nameCell = row.insertCell(4);
                        var operateElementCell = row.insertCell(5);
                        var operateParamsCell = row.insertCell(6);
						var operateCell = row.insertCell(7);
						
						idCell.innerHTML = sortId;
						if (result[i].operator == "Insert_Scenarios") {
							systemNameCell.innerHTML = "";
							modelNameCell.innerHTML = "";
							pageNameCell.innerHTML = "";
							nameCell.innerHTML = "";
							operateParamsCell.innerHTML = scenariosName;
						}
						else if (result[i].operator == "get_url") {
							systemNameCell.innerHTML = "";
							modelNameCell.innerHTML = "";
							pageNameCell.innerHTML = "";
							nameCell.innerHTML = "";
							operateParamsCell.innerHTML = operateParams;
						} else {
							systemNameCell.innerHTML = systemName;
							modelNameCell.innerHTML = modelName;
							pageNameCell.innerHTML = pageName;
							nameCell.innerHTML = elementName;
							operateParamsCell.innerHTML = operateParams;
						}
						operateElementCell.innerHTML = operateElement;
						
						operateCell.innerHTML = "<input id=\"" + sortId + "\" name=\"insertElement\" type=\"submit\" value=\"Insert\" onclick=\"addElement(this)\"/>&nbsp;<input id=\"" + sortId + "\" name=\"deleteElement\" type=\"submit\" value=\"Delete\" onclick=\"deleteElement(this)\"/>"
	
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
	
		function saveElement(btn){

			var operateFunc = document.getElementById("operateFuncSelectInsert").value;

			if (operateFunc == "Insert_Scenarios"){
				console.log(operateFunc);

				var systemId = "";

				var modelId = "";

				var pageId = "";

				var elementId = "";

				var operateParamsSelect = document.getElementById("paramSelectInsert");
				var operateParamsIndex = operateParamsSelect.selectedIndex;
				var ScenariosId = operateParamsSelect.options[operateParamsIndex].value;

				alert(ScenariosId)

			} else {
				var systemSelect = document.getElementById("systemSelectInsert");
				var systemIndex = systemSelect.selectedIndex;
				var systemId = systemSelect.options[systemIndex].value;

				var modelSelect = document.getElementById("modelSelectInsert");
				var modelIndex = modelSelect.selectedIndex;
				var modelId = modelSelect.options[modelIndex].value;

				var pageSelect = document.getElementById("pageSelectInsert");
				var pageIndex = pageSelect.selectedIndex;
				var pageId = pageSelect.options[pageIndex].value;

				var elementSelect = document.getElementById("elementSelectInsert");
				var elementIndex = elementSelect.selectedIndex;
				var elementId = elementSelect.options[elementIndex].value;

				if (operateFunc == "click") {
					var operateParams = "";
				} else{
					var operateParams = document.getElementById("operateInputInsert").value;
				}
			}
				

			//请求参数
			var list = {
				"scenariosId": localStorage.getItem("scenariosID"),
				"systemId": systemId,
				"modelId": modelId,
				"pageId": pageId,
				"elementId": elementId,
				"operateFunc": operateFunc,
			};

			if (operateFunc == "input" || operateFunc == "get_url") {
				list["operateParams"] = operateParams;
			} else if (operateFunc == "Insert_Scenarios"){
				list["operateParams"] = ScenariosId;
			}

			var operate = $(btn).attr("name");
            if (operate == "insertElement") {
				list["insertAfterSortId"] = localStorage.getItem("insertIndex")[0][0];
				list["operateType"] = "insert";
			} else{
				list["operateType"] = "add";
			}

			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/scenariosElement/add",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					document.getElementById("addOperateBtn").disabled=false;
					location.reload();
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});

		}

		function getScenariosAndUpdateParam(){
			if (document.getElementById("operateFuncSelectInsert").value == "Insert_Scenarios"){
				document.getElementById("paramInsert").innerHTML = "<select id=\"paramSelectInsert\"><option></option></select>";
				//请求参数
				var list = {};
				//
				$.ajax({
					//请求方式
					type : "POST",
					//请求的媒体类型
					contentType: "application/json;charset=UTF-8",
					//请求地址
					url : "http://127.0.0.1:8888/uitest/scenarios",
					//数据，json字符串
					data : JSON.stringify(list),
					//请求成功
					success : function(result) {
						console.log("result");
						console.log(result);
						console.log("resultEnd");

						result.forEach(scenariosDic => {
							var scenariosId = scenariosDic.id;
							var sscenariosName = scenariosDic.scenarios_name;
							document.getElementById("paramSelectInsert").options.add(new Option(sscenariosName,scenariosId));
						});
					},
					//请求失败，包含具体的错误信息
					error : function(e){
						console.log(e.status);
						console.log(e.responseText);
					}
				});
			} 
			else if (document.getElementById("operateFuncSelectInsert").value == "click") {
				document.getElementById("paramInsert").innerHTML = "";
				console.log("click");
			}
			else{
				document.getElementById("paramInsert").innerHTML = "<div id=\"paramInsert\"><input id=\"operateInputInsert\" type=\"text\" size=\"50px\" name=\"operateParams\"/></div>";
			}
			
		}

		function addElement(btn){
			var elements = document.getElementsByName("insertElement");
			elements.forEach(element => {
				element.disabled = true;
			});
			var elements = document.getElementsByName("deleteElement");
			elements.forEach(element => {
				element.disabled = true;
			});
			document.getElementsByName("deleteElement").disabled = true;
            localStorage.setItem("elementAddOrInsert", $(btn).attr("name"));
            console.log(localStorage.getItem("elementAddOrInsert"));
            var operate = $(btn).attr("name");
            if (operate == "addElement") {
                var table = document.getElementById("dataTable");
                var row = table.insertRow(-1);
                var idCell = row.insertCell(0);
                var systemNameCell = row.insertCell(1);
                var modelNameCell = row.insertCell(2);
                var pageNameCell = row.insertCell(3);
                var nameCell = row.insertCell(4);
                var operateElementCell = row.insertCell(5);
                var operateParamsCell = row.insertCell(6);
                var operateCell = row.insertCell(7);

                systemName = "<select id=\"systemSelectInsert\" onchange=\"getModels()\"><option></option></select>";
                modelName = "<select id=\"modelSelectInsert\" onchange=\"updatePages()\"><option></option></select>";
                pageName = "<select id=\"pageSelectInsert\" onchange=\"updateElements()\"><option></option></select>";
                elementName = "<select id=\"elementSelectInsert\"><option></option></select>";
                operateFunc = "<select id=\"operateFuncSelectInsert\" onchange=\"getScenariosAndUpdateParam()\"><option></option><option>click</option><option>input</option><option>get_url</option><option>Insert_Scenarios</option></select>";
                operateParams = "<div id=\"paramInsert\"><input id=\"operateInputInsert\" type=\"text\" size=\"50px\" name=\"operateParams\"/></div>";

                idCell.innerHTML = "**";
                systemNameCell.innerHTML = systemName;
                modelNameCell.innerHTML = modelName;
                pageNameCell.innerHTML = pageName;
                nameCell.innerHTML = elementName;
                operateElementCell.innerHTML = operateFunc;
                operateParamsCell.innerHTML = operateParams;
                operateCell.innerHTML = "<input id=\"addBtn\" name=\"addElement\" type=\"submit\" value=\"Add\" onclick=\"saveElement(this)\"/>&nbsp;<input type=\"submit\" value=\"Cancel\" onclick=\"location.reload();\"/>"
                
                document.getElementById("addOperateBtn").disabled=true;
                this.getSystem();
            } else {

				localStorage.setItem("insertIndex", $(btn).attr("id"))

				var table = document.getElementById("dataTable");
                var row = table.insertRow(parseInt($(btn).attr("id"))+1);
                var idCell = row.insertCell(0);
                var systemNameCell = row.insertCell(1);
                var modelNameCell = row.insertCell(2);
                var pageNameCell = row.insertCell(3);
                var nameCell = row.insertCell(4);
                var operateElementCell = row.insertCell(5);
                var operateParamsCell = row.insertCell(6);
                var operateCell = row.insertCell(7);

                systemName = "<select id=\"systemSelectInsert\" onchange=\"getModels()\"><option></option></select>";
                modelName = "<select id=\"modelSelectInsert\" onchange=\"updatePages()\"><option></option></select>";
                pageName = "<select id=\"pageSelectInsert\" onchange=\"updateElements()\"><option></option></select>";
                elementName = "<select id=\"elementSelectInsert\"><option></option></select>";
                operateFunc = "<select id=\"operateFuncSelectInsert\"><option></option><option>click</option><option>input</option><option>get_url</option><option>Insert_Scenarios</option></select>";
                operateParams = "<input id=\"operateInputInsert\" type=\"text\" size=\"50px\" name=\"operateParams\"/>";

                idCell.innerHTML = "**";
                systemNameCell.innerHTML = systemName;
                modelNameCell.innerHTML = modelName;
                pageNameCell.innerHTML = pageName;
                nameCell.innerHTML = elementName;
                operateElementCell.innerHTML = operateFunc;
                operateParamsCell.innerHTML = operateParams;
                operateCell.innerHTML = "<input id=\"insertBtn\" name=\"insertElement\" type=\"submit\" value=\"Insert\" onclick=\"saveElement(this)\"/>&nbsp;<input type=\"submit\" value=\"Cancel\" onclick=\"location.reload();\"/>"
                
                document.getElementById("addOperateBtn").disabled=true;
                this.getSystem();
				
				
			}

				
		}

		function deleteElement(btn) {
			//得到html
			console.log(btn)
			//得到对象
			console.log($(btn))
			//得到自定义的custom
			console.log("delete:" + $(btn).attr("id"))
			//请求参数
			var list = {
				"sortId":$(btn).attr("id"),
				"scenariosId":localStorage.getItem("scenariosID")
			};
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/scenariosElement/delete",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					location.reload();
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}
        
        function getModels() {
            document.getElementById("modelSelectInsert").options.length = 1;
            document.getElementById("pageSelectInsert").options.length = 0;
            var systemSelect = document.getElementById("systemSelectInsert");
            var systemIndex = systemSelect.selectedIndex;
            var systemText = systemSelect.options[systemIndex].value;
            console.log(systemIndex,systemSelect);
            //请求参数
			var list = {
                "systemID": systemText
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/models",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						modelId = result[i].id;
						modelName = result[i].model_name;
                        document.getElementById("modelSelectInsert").options.add(new Option(modelName,modelId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }

        function getSystem(){
            // get systems
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://127.0.0.1:8888/uitest/systems",
                //数据，json字符串
                data : null,
                //请求成功
                success : function(result) {
                    console.log("result");
                    console.log(result);
                    console.log("resultEnd");

                    result.forEach(systemNameDic => {
                        var systemId = systemNameDic.id;
                        var systemName = systemNameDic.system_name;
                        document.getElementById("systemSelectInsert").options.add(new Option(systemName,systemId));
                    });
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        function updatePages() {
            document.getElementById("pageSelectInsert").options.length = 1;

            var modelSelect = document.getElementById("modelSelectInsert");
            var modelIndex = modelSelect.selectedIndex;
            var modelText = modelSelect.options[modelIndex].value;
            //请求参数
			var list = {
                "modelID": modelText
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/pages",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						pageId = result[i].id;
						pageName = result[i].page_name;
						document.getElementById("pageSelectInsert").options.add(new Option(pageName,pageId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }

        function updateElements() {
            document.getElementById("elementSelectInsert").options.length = 1;

            var pageSelect = document.getElementById("pageSelectInsert");
            var pageIndex = pageSelect.selectedIndex;
            var pageText = pageSelect.options[pageIndex].value;
            //请求参数
			var list = {
                "pageId": pageText,
                "exclude":""
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/elements",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						elementId = result[i].id;
						elementName = result[i].element_name;
						document.getElementById("elementSelectInsert").options.add(new Option(elementName,elementId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }
        
    </script>
<div>
	<div id="headerMenu" style="width: 80%; margin-left: 10%; margin-top: 30px">
		<table id="headerMenuTable" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">modelsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">pagesPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)" onclick="window.location='http://127.0.0.1:8888/uitest/elementsPage'">elementsPage</th>
                <th width="25%" height="35" align="center" bgcolor="rgba(19,132,184,1)">scenariosPage</th>
  			</tr>
		</table>
	</div>
	<div>
	    <div id="headerView" style="width: 80%; margin-left: 15%; margin-top: 30px">
	        Scenarios Name:<input id="scenariosName">
	    </div>
	</div>
	<div id="tableView" style="text-align:center;margin-top: 50px; margin-left: 10%; margin-right: 10%">
		<table id="dataTable" width="100%" border="1" cellspacing="0" cellpadding="0">
			<tr>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ID</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">SystemName</th>
                <th width="5%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ModelName</th>
                <th width="15%" height="35" align="center" bgcolor="rgba(238,238,238,1)">PageName</th>
                <th width="15%" height="35" align="center" bgcolor="rgba(238,238,238,1)">ElementName</th>
                <th width="10%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Operator</th>
                <th width="30%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Params</th>
                <th width="15%" height="35" align="center" bgcolor="rgba(238,238,238,1)">Actions</th>
  			</tr>
		</table>
	</div>

	<div>
		<input id="addOperateBtn" name="addElement" style="width: 80%; height: 30px; text-align:center; margin-top: 50px; margin-left: 10%; background-color: #2C8Bf9;" value="Add Element" onclick="addElement(this)">
	</div>

</div>
</body>
</html>